<template>
  <div>
    <a-form-model :model="form" ref="add" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" :rules="formRules">
      <a-form-model-item label="商品名称" prop="name" help="最短3个汉字，最长17个汉字，1个汉字相当于2个字符">
        <a-input v-model="form.name" />
      </a-form-model-item>
      <a-form-model-item label="背景图" prop="coverImgUrl" help="图片尺寸最大300像素*300像素">
        <storage-select v-model="form.coverImgUrl"></storage-select>
      </a-form-model-item>
      <a-form-model-item label="商品价格类型" prop="priceType" help="价格类型，1：一口价（价格1，价格2不传） 2：价格区间（价格1为左边界，价格2为右边界，必传） 3：显示折扣价（价格1为原价，价格2为现价，必传）">
        <a-radio-group v-model="form.priceType">
          <a-radio value="1">
            一口价
          </a-radio>
          <a-radio value="2">
            价格区间
          </a-radio>
          <a-radio value="3">
            显示折扣价
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="价格1" prop="price" help="数字，最多保留两位小数，单位元">
        <a-input type="number" v-model="form.price" addon-after="元"/>
      </a-form-model-item>
      <a-form-model-item label="价格2" prop="price2" help="数字，最多保留两位小数，单位元">
        <a-input type="number" v-model="form.price2" addon-after="元"/>
      </a-form-model-item>
      <a-form-model-item label="选择商品" prop="good">
        <a-button @click="showGoods = true">选择商品</a-button>
        <div class="choosedGood" v-if="choosedGood">
          <span>{{ choosedGood.name }}</span>
          <a-icon type="close-circle" style="cursor: pointer;" @click="choosedGood = null"/>
        </div>
      </a-form-model-item>
    </a-form-model>
    <search-goods v-model="showGoods" @onOk="e => chooseGood(e)"></search-goods>
  </div>
</template>
<script>
import { addGood } from '@/api/plugin/wxlive'
import { SearchGoods } from '@/components'
export default {
  name: 'WxLiveGoodsAdd',
  components: {
    SearchGoods
  },
  data () {
    const checkRankingPic = (rule, value, callback) => {
      try {
        if (this.form.coverImgUrl.trim() == '') {
          callback(new Error('请选择背景图'))
        } else {
          callback()
        }
      } catch (error) {
        console.log('checkRankingPic', error)
        callback()
      }
    }
    const checkChoosedGood = (rule, value, callback) => {
      try {
        if (!this.choosedGood) {
          callback(new Error('请选择商品'))
        } else {
          callback()
        }
      } catch (error) {
        callback()
      }
    }
    return {
      form: {
        name: '',
        coverImgUrl: '',
        price: '',
        price2: '',
        priceType: '1',
        id: ''
      },
      // 表单验证规则
      formRules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        coverImgUrl: [
          { validator: checkRankingPic, trigger: 'change' }
        ],
        priceType: [
          { required: true, message: '请选择商品价格类型', trigger: 'change' }
        ],
        price: [
          { required: true, message: '请输入价格', trigger: 'blur' }
        ],
        good: [
          { validator: checkChoosedGood, trigger: 'change' }
        ]
      },
      times: [],
      showGoods: false,
      choosedGood: null
    }
  },
  created () {
  },
  methods: {
    toSave () {
      return new Promise((resolve, reject) => {
        this.$refs['add'].validate(valid => {
          if (valid) {
              try {
                this.form.id = this.choosedGood.id
                addGood(this.form).then((res) => {
                    if (res.code === 0) {
                      resolve(res)
                    } else {
                      reject(res)
                    }
                })
              } catch (error) {
                reject(res)
              }
          } else {
            reject()
            return false
          }
        })
      })
    },
    chooseGood (e) {
      if (e.length > 0) {
        this.choosedGood = { ...e[0] }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.uploadPic {
  display: flex;
  align-items: center;
}
.uploadPic /deep/ button {
  min-width: 40px;
  border-radius: 0;
}
.tips {
  margin: 0;
  padding: 0;
  line-height: normal;
  font-size: 12px;
  color: #D9534F;
}
.goods_pic_item_box {
  width: 100px;
  height: 100px;
  border: 1px solid #aaa;
  position: relative;
  margin-right: 10px;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.goods_pic_item_box .icon{
  position: absolute;
  top: 0;
  right: 0;
  /* margin-right: 10px; */
}
.choosedGood {
  display: flex;
  align-items: center;
  margin-top: 10px;
  span {
    background-color: rgba(0,0,0,.5);
    border-radius: 6px;
    line-height: normal;
    padding: 2px 5px; 
    margin-right: 10px;
  }
}
</style>
